// SpaceControl.vue - 主组件
<template>
    <div class="space-control-page">
        <!-- 页面标题栏 -->
        <div class="page-title">
            <el-button link class="back-btn" @click="handleBack">
                <el-icon>
                    <ArrowLeft />
                </el-icon>
            </el-button>
            <div class="title">空间控制</div>
        </div>

        <div class="content">
            <!-- 左侧边栏 -->
            <el-card>
                <SpaceSidebar :selected-space="currentSpace" @space-change="handleSpaceChange" />
            </el-card>
            <!-- 右侧空间设备展示区 -->
            <el-card body-style="height:100%;" style="flex:1;width:100%;height:100%;">
                <SpaceDevices :space-info="currentSpace" />
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'
import SpaceSidebar from './components/SpaceSidebar.vue'
import SpaceDevices from './components/SpaceDevices.vue'

const router = useRouter()

// 返回上一级
const handleBack = () => {
    router.back()
}

// 空间数据列表
const spaces = ref([
    {
        id: 'room2',
        name: '教学楼2层',
        groupId: 'teaching_building', // 所属空间组
        groupName: '教学楼', // 空间组名称
    },
    {
        id: 'room3',
        name: '教学楼3层',
        groupId: 'teaching_building',
        groupName: '教学楼',
    }
])

// 当前选中的空间
const currentSpace = ref(spaces.value[0])

// 处理空间切换
const handleSpaceChange = (space) => {
    currentSpace.value = space
}
</script>

<style lang="scss" scoped>
.space-control-page {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-page);
    height: 100%;

    .page-title {
        display: flex;
        align-items: center;
        gap: var(--gap-small);
    }

    .content {
        flex: 1;
        height: 100%;
        display: flex;
        gap: var(--gap-normal);
        min-height: 0; // 修复 Firefox 下的滚动问题
    }
}
</style>